<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="i">
            <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
            <i class="iconfont icon-home" @click="$router.replace('/')"></i>
          </div>
          <p>爱宠建档</p>
        </div>
      </div>
    </div>
    <div class="Pets_archives">
      <div class="same">
        <div class="Pets_same">
          <h3>请选择宠物性别</h3>
          <div class="Pets_sex">
            <div
              v-if="pats.Petssex"
              class="nan"
              @click="pats.Petssex = 1"
              :class="pats.Petssex == 1 ? 'active' : ''"
            >
              <i class="el-icon-male"></i>
            </div>
            <div
              class="nv"
              @click="pats.Petssex = 2"
              :class="pats.Petssex == 2 ? 'active' : ''"
            >
              <i class="el-icon-female"></i>
            </div>
          </div>
          <div class="pets_xx">
            <h3>请完善信息</h3>
            <div class="xinxi">
              <div class="box">
                宠物头像
                <div>
                  <i @click="drawer = true" class="el-icon-arrow-right"></i>
                  <el-drawer
                    title="我是标题"
                    :visible.sync="drawer"
                    :direction="direction"
                    size="50vh"
                  >
                    <span
                      ><el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                      >
                        <el-button size="small" type="primary"
                          >点击上传</el-button
                        >
                        <div slot="tip" class="el-upload__tip">
                          只能上传jpg/png文件，且不超过500kb
                        </div>
                      </el-upload></span
                    >
                  </el-drawer>
                </div>
              </div>
              <div class="box">
                宠物昵称
                <div>
                  <input v-model="pats.PetsName" placeholder="请输入宠物昵称" />
                </div>
              </div>
              <div class="box">
                宠物种类

                <!-- <input v-model="pats.PetsType" placeholder="请输入宠物种类" /> -->
                <!-- <div class="block">
                  <span class="demonstration">hover 触发子菜单</span>
                  <el-cascader
                    v-model="value"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleChange"
                  ></el-cascader>
               
                </div> -->
                <div class="block">
                  <!-- <span class="demonstration">默认 click 触发子菜单</span> -->
                  <el-cascader
                    v-model="value"
                    :options="options"
                    @change="handleChange"
                  ></el-cascader>
                </div>
              </div>
              <div class="box">
                出生日期
                <div class="riqi">
                  <el-date-picker
                    v-model="pats.value1"
                    type="date"
                    placeholder="选择日期"
                    class="ri"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="box">
                是否绝育
                <div>
                  <el-radio-group
                    v-model="pats.issterilization"
                    fill="#eca624"
                    @change="isster"
                  >
                    <el-radio-button label="是" value="1"></el-radio-button>
                    <el-radio-button label="否" value="2"></el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <!-- <div class="box">1</div> -->
            </div>
            <router-link :to="'/me'">
              <el-button @click="insertpet" class="btn"
                >保存</el-button
              ></router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { insertpet } from "@/api";
export default {
  created() {},

  data() {
    return {
      value: [],
      options: [
        {
          value: "猫咪",
          label: "猫咪",
          children: [
            {
              value: "埃及猫",
              label: "埃及猫",
            },
            {
              value: "奥西猫",
              label: "奥西猫",
            },
            {
              value: "波斯猫",
              label: "波斯猫",
            },
            {
              value: "豹猫",
              label: "豹猫",
            },
            {
              value: "彼得秃猫",
              label: "彼得秃猫",
            },
            {
              value: "东方长毛猫",
              label: "东方长毛猫",
            },
            {
              value: "短毛家猫",
              label: "短毛家猫",
            },
            {
              value: "短腿猫",
              label: "短腿猫",
            },
            {
              value: "法老猫王",
              label: "法老猫王",
            },
            {
              value: "加菲猫",
              label: "加菲猫",
            },
            {
              value: "卡尔特猫",
              label: "卡尔特猫",
            },
            {
              value: "狸花猫",
              label: "狸花猫",
            },
            {
              value: "缅甸猫",
              label: "缅甸猫",
            },
            {
              value: "其他",
              label: "其他",
            },
          ],
        },
        {
          value: "狗狗",
          label: "狗狗",
          children: [
            {
              value: "金毛",
              label: "金毛",
            },
            {
              value: "哈士奇",
              label: "哈士奇",
            },
            {
              value: "泰迪",
              label: "泰迪",
            },
            {
              value: "博美",
              label: "博美",
            },
            {
              value: "萨摩耶犬",
              label: "萨摩耶犬",
            },
            {
              value: "吉娃娃",
              label: "吉娃娃",
            },
            {
              value: "其他",
              label: "其他",
            },
          ],
        },
        {
          value: "异宠",
          label: "异宠",
          children: [
            {
              value: "仓鼠",
              label: "仓鼠",
            },
            {
              value: "兔",
              label: "兔",
            },
            {
              value: "刺猬",
              label: "刺猬",
            },
            {
              value: "蜥蜴",
              label: "蜥蜴",
            },
            {
              value: "鹦鹉",
              label: "鹦鹉",
            },
            {
              value: "松鼠",
              label: "松鼠",
            },
          ],
        },
      ],
      color: "#eca624",
      drawer: false,
      direction: "btt",
      radio1: "否",
      fileList: [],
      add: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      labelPosition: "right",
      //PetsSex: 1,
      pats: {
        Petssex: 1,
        Petsurl: "",
        PetsName: "",
        PetsType: "",
        value1: "",
        issterilization: 1,
        usersId: "",
      },
    };
  },
  methods: {
    handleChange(value) {
      // console.log(value);
      // let pa = value[1]
      // console.log(pa)
    },
    isster(val) {
      console.log(val);
      if (val == "是") {
        this.pats.issterilization = 1;
      } else {
        this.pats.issterilization = 2;
      }
    },
    insertpet() {
      this.pats.usersId = this.$store.state.user.id;
      this.pats.PetsType = this.value[1];
      // console.log(this.pats.PetsType,"llllll")
      let patsInfo = {
        birthday: this.pats.value1,
        issterilization: this.pats.issterilization,
        petsname: this.pats.PetsName,
        petssex: Number(this.pats.Petssex),
        petstype: this.pats.PetsType,
        petsurl: this.pats.Petsurl,
        usersId: this.pats.usersId,
      };
      insertpet({ ...patsInfo }).then((res) => {});
    },

    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 8vh;
  //   background: red;

  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    .i {
      display: flex;
      align-items: center;
      i {
        margin: 0 2vw;
      }
      .icon-home {
        font-size: 22px;
      }
    }
    p {
      width: 58vw;
    }
  }
}
.Pets_sex {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.Pets_sex .nv,
.Pets_sex .nan {
  width: 20vw;
  height: 10vh;
  border-radius: 50%;
  background: #d3d3d3;
  // background: #eca624;
  text-align: center;
  line-height: 12vh;
}
.Pets_archives {
  margin-top: 10px;
}
.Pets_sex .nan .el-icon-male,
.Pets_sex .nv .el-icon-female {
  font-size: 8vw;
  color: #fff;
}
.Pets_sex {
  div.active {
    background: #eca624;
  }
}
.pets_xx {
  margin-top: 5vh;
}
.xinxi {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 10px;
  .box {
    height: 8vh;
    margin-right: 2vw;
    margin-left: 2vw;
    line-height: 8vh;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f4f4f4;
    input {
      height: 7vh;

      text-align: right;
      border: none;
      font-size: 14px;
      outline: none;
    }
    .riqi {
      font-size: 14px;
      color: #b1b1b1;
    }
    .ri {
      width: 40vw;
    }
  }
}
.btn {
  margin-top: 5vh;
  width: 80vw;
  margin-left: 8vw;
  border-radius: 15px;
  background: #eca624;
}
</style>
